<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基利斯门店管理系统-登录</title>
    <link href="{$htmlStaticPath}/css/login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{$htmlStaticPath}/common/three.min.js"></script>
</head>

<body style="overflow: hidden;">
    <script type="text/javascript">
        var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 15;
        var container;
        var camera, scene, renderer;
        var particles, particle, count = 0;
        var mouseX = 10, mouseY = -380;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        init();
        animate();
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 1000;
            scene = new THREE.Scene();
            particles = new Array();
            var PI2 = Math.PI * 2;
            var material = new THREE.ParticleCanvasMaterial({
                color: 0xffffff, //浮动小球的颜色
                program: function (context) {
                    context.beginPath();
                    context.arc(0, 0, 1, 0, PI2, false);
                    context.fill();
                }
            });
            var i = 0;
            for (var ix = 0; ix < AMOUNTX; ix++) {
                for (var iy = 0; iy < AMOUNTY; iy++) {
                    particle = particles[i++] = new THREE.Particle(material);
                    particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
                    particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
                    scene.add(particle);
                }
            }
            renderer = new THREE.CanvasRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight * 1.8);
            container.appendChild(renderer.domElement);
            //document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            //document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            //document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            //
            window.addEventListener('resize', onWindowResize, false);
        }
        function onWindowResize() {
            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight * 1.8);
        }

        //
        function onDocumentMouseMove(event) {
            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;
        }
        function onDocumentTouchStart(event) {
            if (event.touches.length === 1) {
                event.preventDefault();
                mouseX = event.touches[0].pageX - windowHalfX;
                mouseY = event.touches[0].pageY - windowHalfY;
            }
        }
        function onDocumentTouchMove(event) {
            if (event.touches.length === 1) {
                event.preventDefault();
                mouseX = event.touches[0].pageX - windowHalfX;
                mouseY = event.touches[0].pageY - windowHalfY;
            }
        }

        //
        function animate() {
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            camera.position.x += (mouseX - camera.position.x) * .05;
            camera.position.y += (- mouseY - camera.position.y) * .05;
            camera.lookAt(scene.position);
            var i = 0;
            for (var ix = 0; ix < AMOUNTX; ix++) {
                for (var iy = 0; iy < AMOUNTY; iy++) {
                    particle = particles[i++];
                    particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);
                    particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2;
                }
            }
            renderer.render(scene, camera);
            count += 0.1;

        }
    </script>

    <div class="bodybj"></div>
    <div class="log_center">
        <div class="log_logo">
            <img src="{$htmlStaticPath}/images/login/logo.png" />
        </div>
        <div class="log_bj">
            <ul>
                <form class="layui-form" action="" method="post">
                    <li>
                        <span class="tb1"></span>
                        <input name="account" class="inp1" value="用户名或手机号" style="color:#666;" onblur="if(this.value==''){this.value='用户名或手机号';this.style.color='#666'}"
                         onfocus="if(this.value=='用户名或手机号'){this.value='';this.style.color='#666'}" type="text">
                    </li>
                    <li>
                        <span class="tb2"></span>
                        <input name="password" class="inp1" value="请您输入密码" style="color:#666;" onblur="if(this.value==''){this.value='请您输入密码';this.style.color='#666';this.type='text'}"
                        onfocus="if(this.value=='请您输入密码'){this.value='';this.style.color='#666';this.type='password'}" type="text">
                    </li>
                    <li>
                        <span class="tb3"></span>
                        <input name="code" class="inp1" value="验证码" style="color:#666;" onblur="if(this.value==''){this.value='验证码';this.style.color='#666'}"
                         onfocus="if(this.value=='验证码'){this.value='';this.style.color='#666'}" type="text">
                        <ol style="top: 10px;">
                            <a href="JavaScript:;">
                                <img style="height: 50px;" src="{:captcha_src()}?1" id="img-code" />
                            </a>
                        </ol>
                    </li>
                    <div class="tz_an">
                        <a href="javascript:;" lay-submit="" lay-filter="login">登 录</a>
                        <button style="display:none;" lay-submit="" lay-filter="login">登录</button>
                    </div>
                    <div class="tz_zc" style="display: none;">
                        <a href="javascript:;" id="forget">忘记密码</a>
                    </div>
                </form>
            </ul>
        </div>
    </div>

    <script type="text/javascript" src="{$htmlStaticPath}/jquery.js?v={$htmlVersion}"></script>
    <script type="text/javascript" src="{$htmlStaticPath}/common/jquery.md5.js?v={$htmlVersion}"></script>
    <script src="{$htmlStaticPath}/layui/layui.js?v={$htmlVersion}"></script>
    <script>
        layui.use('form', function (form) {
            form.on("submit(login)", function (data) {
                var account = data.field.account;
                var password = $.md5(data.field.password);
                var code = data.field.code;
                $.post("/passport/login", { account: account, password: password, code: code }, function (ret) {
                    layer.closeAll();
                    if (ret.code == 1) {
                        layer.msg(ret.msg, { icon: 6 });
                        setTimeout(function(){
                            window.location.href = ret.url;
                        },1000);
                    } else {
                        $("#img-code").click();
                        layer.msg(ret.msg, { icon: 5 });
                    }
                }, "json");
                return false;
            })

            $("#img-code").click(function () {
                var url = $(this).prop("src") + 1;
                $(this).prop("src", url);
            })
        });

    </script>
</body>

</html>